<template>
  <Dialog
    v-model="show"
    @confirm="close"
    @close="close"
    :title="$t('news.预览消息')"
    width="1000px"
  >
    <LangTabs v-model="lang" />
    <div class="content">
      <div class="fs-16 mb12 text-center">{{ formData["title" + lang] }}</div>
      <div class="content-html" v-html="formData['content' + lang]"></div>
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch } from "vue";
import Dialog from "@/components/dialog.vue";
import LangTabs from "@/components/langTabs.vue";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const lang = ref(locale.value);
const show = defineModel();
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const formData = ref({});
watch(show, (val) => {
  if (val) {
    if (props?.data?.id) {
      formData.value = props.data;
    }
  }
});

const close = () => {
  show.value = false;
  lang.value = locale.value;
};
</script>
<style lang="scss" scoped>
.content {
  height: 400px;
  overflow-y: auto;
  img {
    max-width: 100%;
  }
}
</style>
